<template>
    <!--中间栏Social-->
    <div class="social">
        <div class="container">
            <div class="left">
                <img src="@/assets/images/zz.png" alt="">
                <p class="title">社会组织（家）</p>
                <p class="num">1654</p>
            </div>
            <div class="middle">
                <img src="@/assets/images/zz.png" alt="">
                <p class="title">社会组织（家）</p>
                <p class="num">1654</p>
            </div>
            <div class="right">
                <img src="@/assets/images/zz.png" alt="">
                <p class="title">社会组织（家）</p>
                <p class="num">1654</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.social{
    background-image: url(@/assets/images/bg.png);
    width: 100%;
    height:220px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .container{
        height:72px;
        display: flex;
        margin: 0;
        > div{
            flex: 1;
            img{
                display: block;
                float: left;
                padding-right:34px;
                margin-left: 20px;
            }
        }
        .title{
            font-size: 16px;
            font-weight: 600;
            color: #222222;
            line-height: 30px;
        }
        .num{
            font-size: 36px;
            font-weight: bold;
            color: #222222;
            line-height: 40px;
        }
    }
}
</style>
